<template>
	<div>
		<div class="login_con">
			<div class="login_box" style="padding-bottom: 30px;margin-top: 30px;">
				<div class="Vendor">
					<span>商户注册</span>
					<span class="Vendor-u">User register</span>
				</div>
				<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" class="demo-ruleForm">
					<el-form-item prop="phone">
						<el-input prefix-icon="el-icon-mobile-phone" type="text" placeholder="请输入手机号" v-model="ruleForm2.phone"
						 auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item prop="phoneCode">
						<el-input placeholder="请输入短信验证码" prefix-icon="el-icon-s-claim" class="input-min" style="width: 160px;" v-model="ruleForm2.phoneCode"></el-input>
						<el-button class="verification" :disabled="show != true ? true : false" v-on:click="huoquyzm">发送验证码</el-button>
						<span class="register-msg-btn" v-show="!show">&nbsp;&nbsp;{{count}} 秒</span>
					</el-form-item>
					<el-form-item prop="password">
						<el-input prefix-icon="el-icon-lock" type="password" placeholder="请输入密码" v-model="ruleForm2.password"
						 auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item prop="repeatPassword">
						<el-input prefix-icon="el-icon-lock" type="password" placeholder="请再次输入密码" v-model="ruleForm2.repeatPassword"
						 auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item prop="weChat">
						<el-input v-model="ruleForm2.weChat" prefix-icon="el-icon-user" placeholder="请输入微信号" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item prop="qq">
						<el-input v-model.number="ruleForm2.qq" prefix-icon="el-icon-user-solid" placeholder="请输入QQ号" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item prop="inviteCode">
						<el-input v-model="ruleForm2.inviteCode" prefix-icon="el-icon-s-order" placeholder="请输入邀请码" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item prop="code">
						<yzma @ztai="yzheng"></yzma>
					</el-form-item>

					<el-form-item style="line-height: 20px">
						<el-checkbox fill="#4b95ff" v-model="checked"></el-checkbox>我已阅读并接受
						<span class="protocol" @click="dialogVisible2 = true">用户协议</span>
						<el-dialog title="提示" :visible.sync="dialogVisible2" width="30%">
							<span>这是一段信息</span>
							<span slot="footer" class="dialog-footer">
								<el-button @click="dialogVisible2 = false">取 消</el-button>
								<el-button type="primary" @click="dialogVisible2 = false" style="margin-left: 10px;padding: 10px;background-color: #3A8EE6;">确 定</el-button>
							</span>
						</el-dialog>
					</el-form-item>
					<el-button type="success" @click="enroll" :loading="submitLoading" class="enroll-bot" style="padding: 15px;border: 1px solid;">注 册</el-button>
					<div v-if="!isMobileDevice">
						<span class="login-w">
							已有商户账号？
							<router-link class="abc" to="./login">直接登录</router-link>
						</span>
					</div>
				</el-form>
			</div>
		</div>
	</div>
</template>
<script>

    import yzma from '../../components/yzma'
    import { apiRegister, apiSMSCode} from '../../request/api';
	export default {
		name: "Enroll",
		components:{
			yzma:yzma
		},
		data() {
			var validatePass = (rule, value, callback) => {
				if (this.ruleForm2.repeatPassword !== "") {
					this.$refs.ruleForm2.validateField("repeatPassword");

					callback();
				}
			};
			var validatePass2 = (rule, value, callback) => {
				if (value === "") {
					callback(new Error("请再次输入密码"));
				} else if (value !== this.ruleForm2.password) {
					callback(new Error("两次输入密码不一致!"));
				} else {
					callback();
				}
			};
			return {
				checked: true,
				dialogVisible: false,
				dialogVisible2: false,
				ruleForm2: {
					phone: "",
					phoneCode: "",
					password: "",
					repeatPassword: "",
					weChat: "",
					qq: "",
					inviteCode: "",
					code:"1111"
				},
				rules2: {
					inviteCode: {
						required: true,
						message: "邀请码不能为空",
						trigger: "blur"
					},
					qq: [{
							required: true,
							message: "请输入QQ号",
							trigger: "blur"
						},
						{
							type: "number",
							message: "QQ号必须为数字值",
							trigger: "blur"
						}
					],
					weChat: [{
							required: true,
							message: "请输入微信号",
							trigger: "blur"
						}],
					phone: [{
							required: true,
							message: "请输入手机号",
							trigger: "blur"
						},
						{
							min: 11,
							max: 11,
							message: "手机号在11位",
							trigger: "blur"
						}
					],
					phoneCode: [{
							required: true,
							message: "请输入手机短信验证码",
							trigger: "blur"
						},
						{
							min: 3,
							max: 10,
							message: "验证码在3-10字符位之间",
							trigger: "blur"
						}
					],
					password: [{
							required: true,
							message: "请输入密码",
							trigger: "blur"
						},
						{
							min: 6,
							max: 16,
							message: "密码在6-16字符位之间",
							trigger: "blur"
						},
						{
							validator: validatePass,
							trigger: "blur"
						}
					],
					repeatPassword: [{
							required: true,
							message: "请输入密码",
							trigger: "blur"
						},
						{
							min: 6,
							max: 16,
							message: "密码在6-16字符位之间",
							trigger: "blur"
						},
						{
							validator: validatePass2,
							trigger: "blur"
						}
					],

				},
				yzma: '',
				show:true,
				timer:null,
				count:'',
                submitLoading: false,
                isMobileDevice: false
			};
		},
		created() {
            this.isMobile()
		},
    watch:{
      //监听路由跳转
      '$route': {
        handler: function(value) {
          if (value.query.inviteCode){
            this.ruleForm2.inviteCode = value.query.inviteCode
          }
        },
        immediate: true
      },
      },
		methods: {
			//验证码
      isMobile() {
      	 let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
         this.isMobileDevice = flag ? true : false
         return flag ? true : false
      },
			yzheng(da){
       this.yzma = da
			},
			//短信验证码
			huoquyzm(){
				if(this.ruleForm2.phone.length < 11) return this.$message.error('输入的手机号码必须是11位数');
				if(this.ruleForm2.phone.length > 11) return this.$message.error('输入的手机号码必须是11位数');
				console.log(!this.timer)
				this.show = false;
					const TIME_COUNT = 60;
					if (!this.timer) {
					this.count = TIME_COUNT;
					this.show = false;
						if(this.show = true){
							if(this.ruleForm2.phone != ''){
                                 apiSMSCode({
                                    phone:this.ruleForm2.phone,
									codeType:'merchantRegister'
                                 }).then(item =>{
                                    if(item.data.code == 2 && item.data.msg != '该用户已经注册'){
										this.show = true;
										clearInterval(this.timer);
										this.timer = null;
										return this.$message.error(item.data.msg);
									}else if(item.data.code == 2 && item.data.msg == '该用户已经注册'){
										 this.show = true;
										 clearInterval(this.timer);
										 this.timer = null;
										return this.$message.error(item.data.msg);
									}
									this.$message.success(item.data.msg);
                                }).catch(item => {
                                    this.$message.error(item.data.msg);
                                }) 
								
							}else {
								this.$message.error('手机号码不能为空');
							}
						}
						this.dingshi(TIME_COUNT)
					}
			},
			dingshi(TIME_COUNT){
				this.show = false;
				this.timer = setInterval(() => {
					if (this.count > 0 && this.count <= TIME_COUNT) {
						this.count--;
					} else {
						this.show = true;
						clearInterval(this.timer);
						this.timer = null;
					}
					}, 1000)
			},
			enroll() {
				if (this.checked != true) return this.$message.error("请同意用户协议");
				this.$refs.ruleForm2.validate(async valid => {
					// 如果这个值为false 直接return不发送请求

					if (!valid) return;

					if(this.yzma != true) {
						this.$message.error("验证失败!!");
						return;
					}
                   this.submitLoading = true
                    apiRegister(this.ruleForm2).then(res =>{
                        if (res.code == 1) {
                            this.submitLoading = false
						    this.$message.success("注册成功");
						    this.dialogVisible = true;
                            if(this.isMobileDevice){
                                setTimeout(()=>{
                                    this.$message.success("注册成功,请到pc端上登录");
                                },300)
                            } else {
                                this.$router.push("/login");
                            }

                        }else{
                            this.$message.error(res.msg);
                            this.dialogVisible = true;
                            this.submitLoading = false
                        }           
                    }).catch(item => {
                       
                    })
				});
			},
			rouerlinkLogin() {
				this.dialogVisible = false;
				this.$router.push("/login");
			},
			enrollqko() {
				this.dialogVisible = false;
				this.$refs.ruleForm2.resetFields();
			}

		}
	};
</script>
<style lang="less" scoped>
	.login_con {
		background-color: #FFFFFF;
		height: 100%;
		width: 100%;
		position: absolute;
	}

	.login_box {
		width: 336px;
		padding: 0 32px;
		margin: 0 auto;
		border: 1px solid #e0e0e0;
		border-radius: 4px;
		background: #fff;
		box-shadow: 0 0 10px #888;
		height: 720px;
	}

	.Vendor {
		margin: 14px 0 20px;
		color: #4b95ff;
		font-size: 24px;
		border-bottom: 1px solid #ddd;
		padding-bottom: 14px;
	}

	.enroll-bot {
		display: block;
		width: 100%;
		margin: 20px 0;
		background: #4b95ff;
		color: #fff;
	}

	.Vendor-u {
		display: inline-block;
		margin-left: 10px;
		color: #bfbfbf;
		font-size: 14px;
	}

	.input-min {
		width: 60%;
	}

	.verification {
		border-radius: 4px;
		text-align: center;
		background: #4b95ff;
		display: inline-block;
		width: 110px;
		margin-left: 16px;
		height: 40px;
		display: inline-block;
		vertical-align: middle;
		color: #fff;
		cursor: pointer;

		img {
			transform: scale(1);
			transition: all 0.5s ease;
		}
	}

	.password-w {
		float: right;
		color: rgb(153, 153, 153);
		text-decoration: none;
	}

	.password-w:hover {
		border-bottom: 1px solid #ccc;
	}

	.register {
		display: block;
		color: #999;
		margin: 20px 0;
		text-align: center;
		font-size: 18px;
	}

	.protocol {
		color: rgb(100, 149, 237);
		cursor: pointer;
	}

	.login-w {
		display: inline-block;
		width: 100%;
		text-align: right;
		color: #bfbfbf;

		a {
			color: #f68585;
		}
	}
</style>
